<template>
  <div class="pc-com-task">
    <el-tabs
      class="w-el-tabs"
      value="0"
      @tab-click="navClick">
      <el-tab-pane
        label="全部"/>
      <el-tab-pane
        v-for="(v) in typeArr"
        :key="v"
        :label="v"/>
    </el-tabs>
    <w-search-bar
      @search="searchClick"
      class="search-bar"
      :options="options"/>
  </div>
</template>

<script>
  import WSearchBar from '@/components/pc/searchBar/selKey'
  export default {
    name: "PCComTASK",
    components: {
      WSearchBar
    },
    props: {
      classModel: {
        type: Function,
        default() {
          return null;
        }
      },
      /**
       * 所有选项
       */
      options: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        /**
         * 类型数组
         */
        typeArr: []
      }
    },
    methods: {
      /**
       * 获取类型数组
       */
      getTypeArr() {
        this.classModel.loadTypes().w_then((dataArr) => {
          this.typeArr = dataArr
        })
      },
      /**
       * 导航点击
       */
      navClick(k) {
        this.$emit('change', k)
      },
      /**
       * 搜索按钮点击
       */
      searchClick(type, keyStr) {
        this.$emit('search', keyStr, type)
      }
    },
    mounted() {
      this.getTypeArr()
    }
  }
</script>

<style lang="scss" scoped>
.pc-com-task {
  position: relative;
  margin-top: 10px;
  .search-bar {
    position: absolute;
    right: 0;
    top: 0;
  }
}
</style>
